<template>
  <div
    class="cityContainer"
    v-if="showCont"
    :style="'min-height: ' + docheight + 'px'"
  >
    <div class="logoImg">
      <img src="static/img/checkBanner.png" />
    </div>
    <div class="CityCont">
      <div
        :class="navId == item.id ? 'cityStep' : 'cityStep no_bg'"
        :key="index"
        v-for="(item, index) in stepArr"
        @click="navFn(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div :class="navId ? 'nextBtn' : 'nextBtn noCheck'" @click="nextFn">
      {{ navId ? "开始报名" : "您还未选择学校" }}
    </div>
    <toast
      v-model="showToast"
      position="middle"
      width="50%"
      type="text"
      :time="1000"
      >{{ showText }}</toast
    >
  </div>
</template>

<script>
import { Toast } from "vux";
import { getStatus, getSignUp } from "@/http/api";

export default {
  components: { Toast },
  data() {
    return {
      showText: "",
      navId: "",
      showToast: false,
      showCont: false,
      stepArr: [
        { name: "新加坡国立研学冬令营", id: 1 },
        { name: "上海交大冬令营", id: 2 }
      ]
    };
  },
  props: {},
  methods: {
    getEndTime() {
      $.ajax({
        url: "https://gx.localbird.cn/Index/Check_project",
        data: {
          project_number: "XM24739"
        },
        type: "post",
        success: res => {
          console.log(res);
          if (res.data < 1) {
            alert("访问失败，请联系管理员");
          } else {
            this.getData();
          }
        }
      });
    },
    onConfirm(data) {},
    checkFn() {
      this.showCity = true;
    },
    navFn(item) {
      this.navId = item.id;
    },
    nextFn() {
      if (this.navId) {
        this.$router.push({ path: "/openShop", query: { id: this.navId } });
      }
    },
    getSifnInfo() {
      let data = {};
      getSignUp(data)
        .then(res => {
          if (res.data.code == 1) {
            this.$router.push({
              path: "/openShop",
              query: { id: res.data.data.bm_type }
            });
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
        })
        .catch(() => {
          this.showLoad = false;
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    getData() {
      let data = {};
      getStatus(data)
        .then(res => {
          if (res.data.code == 1) {
            if (res.data.data == 2) {
              this.showCont = true;
            } else if (res.data.data == 1) {
              this.getSifnInfo();
            }
          } else {
            this.showCont = true;
            this.showToast = true;
            this.showText = res.data.msg;
          }
        })
        .catch(() => {
          this.showLoad = false;
          this.showTimeOut = true;
          this.showCont = true;
        });
    }
  },
  mounted() {},
  created() {
    this.getEndTime();
  }
};
</script>

<style scoped lang="less">
.cityContainer {
  width: 100%;
  // background-color: #fbf6e8;
  padding: 0.75rem 4%;
  box-sizing: border-box;
  .cityHead {
    width: 100%;
    text-align: center;
    margin-top: 1.25rem;
    img {
      width: 70%;
    }
    .cityDes {
      font-size: 0.6rem;
      color: #7e6b5d;
      margin-top: 0.5rem;
      text-align: center;
    }
  }
  .logoImg {
    text-align: center;
    // margin-bottom: 1rem;
    // margin-top:2rem;
    img {
      width: 100%;
    }
  }
  .cityTip {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    color: #5e483f;
  }
  .engTip {
    color: #5b4940;
    font-size: 0.7rem;
    text-align: center;
  }

  .nextBtn {
    line-height: 2.5rem;
    width: 80%;
    margin: 0 auto;
    margin-top: 1.5rem;
    // background-color:#5b4940;
    background-color: #ebebeb;
    color: #000;
    text-align: center;
    border-radius: 2rem;
    font-weight: bold;
    border: 0.1rem solid #000;
  }
  .noCheck {
    opacity: 0.5;
  }
  .CityCont {
    padding-top: 1.5rem;
    .cityStep {
      width: 80%;
      display: flex;
      justify-content: center;
      line-height: 3rem;
      background-color: #5c84e9;
      border: 0.1rem solid #5c84e9;
      color: #fff;
      font-weight: bold;
      border-radius: 2rem;
      box-sizing: border-box;
      padding: 0 0.75rem;
      align-items: center;
      margin: 0rem auto 1rem;
      .iconfont {
        margin-left: 0.5rem;
      }
    }
    .no_bg {
      background-color: #e7f2ff;
      color: #5c84e9;
    }
  }
}
</style>
